<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 500px;
				height: 300px;
				margin: 0 auto;
				border: 1px solid #ccc;
				position: relative;
			}
			.img{
				width: 500px;
				height: 300px;
			}
			.operaL{
				width: 20px;
				height: 100px;
				position: absolute;
				left: 0;
				top: 50%;
				margin-top: -50px;
				background: #ccc;
				cursor: pointer;
			}
			.operaR{
				width: 20px;
				height: 100px;
				position: absolute;
				right: 0;
				top: 50%;
				margin-top: -50px;
				background: #ccc;
				cursor: pointer;
			}
			.span{
				height: 20px;
				width: 100%;
				position: absolute;
				bottom: 20px;
				display: flex;
				display: -webkit-flex;
				display: -moz-flex;
				/* OLD - Firefox 19- (buggy but mostly works) */
				display: -ms-flex;
				-webkit-box-pack: center;
			    -webkit-justify-content: center;
			    justify-content: center;
			}
			.span span{
				width: 20px;
				height: 20px;
				float: left;
				background: #ccc;
				margin-right: 2px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="img"></div>
			<div class="span"></div>
			<div class="operaL"></div>
			<div class="operaR"></div>
		</div>
	</body>
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
	<script type="text/javascript">
		let imgList=['img/TR_1.jpg','img/TR_2.jpg','img/TR_3.jpg']
		//点
		let spanList='';
		for(var i=0;i<imgList.length;i++){
			spanList+='<span></span>'
		}
		//图片
		$('.span').append(spanList)
		$('.img').html(imgList[0])
		//点击左右
		let index=0;
		let imgListLen = imgList.length
		$('.operaR').on('click',function(){
			if(index<imgListLen-1){
				index++;
			}else{
				index=0
			}
			$('.img').html(imgList[index])
		})
		$('.operaL').on('click',function(){
			if(index==0){
				index=imgListLen-1;
			}else{
				index--;
			}
			$('.img').html(imgList[index])
		})
		//点击点
		$('.span span').on('click',function(){
			index = $(this).index()
			$('.img').html(imgList[index])
		})		
		//轮播
		var timer=null;
	    timer = setInterval(function(){
			if(index<imgListLen-1){
				index++;
			}else{
				index=0
			}
			$('.img').html(imgList[index])
		},1000)
		$('.box').on('mouseenter',function(){
			clearInterval(timer)
		})
		$('.box').on('mouseleave',function(){
			timer = setInterval(function(){
			if(index<imgListLen-1){
				index++;
			}else{
				index=0
			}
			$('.img').html(imgList[index])
		},1000)
		})
	</script>
</html>
